<template>
    <div class="course-section">
        <el-card>
            <div slot="header"></div>
            <el-tree 
                :data="section"
                :props="defaultProps"
                draggable
                :allow-drop="handleAllowDrop"
                @node-drop="handleSort">
                <div class="inner" slot-scope="{ node, data }">
                    <span>{{ node.label }}</span>
                    <!--section-->
                    <span v-if="data.sectionName" class="actions">
                        <el-button>编辑</el-button>
                        <el-button>添加课时</el-button>
                        <el-button>状态</el-button>
                    </span>
                    <!--lession-->
                    <span v-else class="actions">
                        <el-button>编辑</el-button>
                        <el-button type="success" @click="$router.push({
                            name: 'course-video',
                            params: {
                                courseId: courseId
                            }
                        })">上传视频</el-button>
                        <el-button>状态</el-button>
                    </span>
                </div>
            </el-tree>
        </el-card>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getSectionAndLesson, saveOrUpdateSection}  from '@/services/course-section'

export default Vue.extend({
    name: 'CourseSection',
    props: {
        courseId: {
            type: [String, Number],
            required: true
        }
    },
    data () {
        return {
            section: [],
            defaultProps: {
                children: 'lessonDTOS',
                label (data: any) {
                    return data.sectionName || data.theme
                }
            }
        };
    },
    methods: {
        async loadSection() {
            const { data } = await getSectionAndLesson(this.courseId)
            if (data.code === '000000') {
                this.section = data.data
            }
        },
        handleAllowDrop(draggingNode: any, dropNode: any, type: any) {
            // draggingNode 拖动的节点
            // dropNode 要放置的目标节点
            // type: 'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后
            return draggingNode.data.sectionId === dropNode.data.sectionId && type !== 'inner'
        },
        handleSort(dragNode: any, dropNode: any, type: any, event: any) {
            dragNode.parent.childNodes.map((item: any, index: number) => {
                if (item.data.lessonDTOs) {
                    // 阶段
                    saveOrUpdateSection({
                        id: item.data.id,
                        orderNum: index + 1
                    })
                } else {
                    // 课时
                }
            })
        }
    },
    created () {
        this.loadSection()
    }
})
</script>

<style lang="scss" scoped>
    .inner {
        display: flex;
        flex: 1;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ebeef5;
    }
    ::v-deep .el-tree-node__content {
        height: auto;
    }
</style>